<template>
    <div>
        <bread-crumb></bread-crumb>
        <div class="box">
        <h1>某个学生</h1>
        <div class="tent">
            <div class="text">
                <div>
                    <input type="text" placeholder="请输入学号" v-model="stu_id">
                    <button @click="test">查询</button>
                </div>
                <label>姓名：<input type="text" v-model="stu_name" /></label><br />
                <label>性别：<input type="text" v-model="stu_sex" /></label><br />
                <label>籍贯<input type="text" v-model="stu_jg" /></label><br />
                <label>出生日期：<input type="text" v-model="stu_date" /></label><br />
                <label>爱好：<input type="text" v-model="stu_hobby" /></label><br />
                <label>男或女朋友：<input type="text" v-model="stu_gbf" /></label><br>
                <label>头像：<img :src="stu_head_img" alt="" width="100" height="100"></label><br>
            </div>
        </div>
    </div>
    </div>
    
</template>

<script>
import request from '../../api/request';
export default {
    data() {
        return {
            stu_id: "",
            stu_name: "",
            stu_sex: "",
            stu_jg: "",
            stu_date: "",
            stu_hobby: "",
            stu_gbf: "",
            stu_head_img: ""
        }
    },
    methods: {
        async test() {
            let stult = await request({ method: 'get', url: `search_info_item`, arg: {stu_id:this.stu_id}, headerType: '' });
            this.stu_name = stult.data[0].stu_name;
            this.stu_sex = stult.data[0].stu_sex;
            this.stu_jg = stult.data[0].stu_jg;
            this.stu_date = stult.data[0].stu_date
            this.stu_hobby = stult.data[0].stu_hobby;
            this.stu_gbf = stult.data[0].stu_gbf;
            this.stu_head_img = stult.data[0].stu_head_img;
            console.log(stult);
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tent {
        width: 600px;
        height: 500px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            div {
                margin-bottom: 20px;
            }
        }
    }
}
</style>